<template>
	<view class="sign-w">
		<view class="sign">
			<!-- 标题 -->
			<view class="head">
				{{signTitle}}
			</view>
			<view class="sign-list" v-if="signList && signList.length >0">
				<u-cell-group>
					<!-- 列表 -->
					<u-cell size="large" v-for="(item,index) in signList" icon="volume" :iconStyle="{'color':'#2b85e4'}"
						:disabled="item.currentUserSign"
						:url="`/pagesB/pages/signProject/setSignInfo?id=${item.id}&name=${item.name}&time=${item.activityDate}&num=${item.money}`"
						:isLink="!item.currentUserSign" arrow-direction="right">
						<view slot="title">
							<view class="content">
								<!-- 活动名称 -->
								<view class="free"> <u--text v-if="item.money == 0" type="error"
										text="(免费)"></u--text><span>{{item.name}}</span></view>
								<view class="tags" v-if="item.currentUserSign">
									<u-tag text="已报名" plain size="mini" type="primary"></u-tag>
								</view>
							</view>
							<span class="time">报名时间：{{item.signDate}}</span>
						</view>
					</u-cell>
				</u-cell-group>
			</view>
			<u-empty v-else text="暂无活动" marginTop="10" icon="http://cdn.uviewui.com/uview/empty/news.png">
			</u-empty>
		</view>
		<!-- <span>下拉加载更多活动</span> -->
	</view>
</template>

<script>
	import {
		findActivity
	} from '@/api/signProject.js'

	import {
		mapState,
		mapMutations
	} from 'vuex' // vuex

	import {
		getNowTime
	} from "@/utils/dayjs.js"

	export default {
		data() {
			return {
				signTitle: "活动报名",
				signList: [],

			};
		},
		onShow() {
			// token不存在，调小程序登陆接口获取code,通过code获取token
			if (!uni.getStorageSync('token')) {
				console.log("token不存在");
				this.getInfo()
			}
			this.signList = []
			this.getfindActivitylist()
		},

		methods: {
			...mapMutations('user', ['setToken']),

			// 通过微信code获取token
			getInfo() {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						this.code = res.code
						this.getToken()
					}
				})
			},

			// 获取token
			getToken() {
				const _that = this
				uni.request({
					url: 'https://wechat.atptest.com:44386/connect/token',
					data: {
						code: _that.code,
						grant_type: 'wechat',
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': 'Basic QXBpX1dlYjpBcGlfV2Vi'
					},
					success(res) {
						console.log("App 获取到了token");
						_that.setToken(res.data.access_token);
						_that.getfindActivitylist();
					}
				})
			},

			async getfindActivitylist() {
				console.log(getNowTime(false));
				let res = await findActivity({
					PageIndex: 1,
					PageSize: 999,
					StartDate:getNowTime(false)
				})
				res.items && res.items.map(v => {
					v.signDate = v.signStartDate.split(' ')[0] + '    至   ' + v.signEndDate.split(' ')[0],
						v.activityDate = v.activityStartDate.split(' ')[0] + '    至   ' + v.activityEndDate
						.split(' ')[0]
				})
				this.signList = res.items
			}
		},

	}
</script>

<style lang="scss" scoped>
	.sign-w {
		width: 100%;
		height: 100vh;
		background: url("http://applet.atptest.com/sign.png") no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.sign {
			width: 100%;
			background-color: #fff;
			margin: 0 48rpx;
			height: 800rpx;
			border-radius: 40rpx;

			.head {
				text-align: center;
				margin: 20rpx 0;
				font-size: 40rpx;
				font-weight: 700;
			}

			.content {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.tags {
					margin-left: 10rpx;
				}
			}

			.sign-list {
				height: 80%;
				overflow-y: scroll;

				.time {
					font-size: 24rpx;
					color: #777;
				}

				.free {
					color: #333;
					font-weight: 700;
					display: flex;
				}
			}
		}
	}
</style>